<template>
  <div class="exportExcel-container common-container">
    <div class="export-config">
      <div class="export-style-config">
        <label class="label-name">文件名:</label>
        <el-input
          v-model="options.filename"
          placeholder="请输入文件名"
          clearable
          @change="(val) => handleChange(val, 'separator')"
          style="width: 200px; margin-left: 10px; margin-right: 30px;"
        ></el-input>
      </div>
      <div class="export-style-config">
        <label class="label-name">表头字体大小:</label>
        <el-input-number
          class="input-number-fontsize"
          v-model="options.headerFontSize"
          :min="0"
          label="描述文字"
        ></el-input-number>
      </div>
      <div class="export-style-config">
        <label class="label-name">表头水平对齐:</label>
        <el-select class="style-horizontal" v-model="options.headerHorizontal" placeholder="请选择">
          <el-option
            v-for="item in horizontalOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="export-style-config">
        <label class="label-name">表头背景色:</label>
        <el-color-picker
          class="style-color-picker"
          v-model="options.headerBgColor"
          size="mini"
          style="margin-right: 30px;"
        ></el-color-picker>
      </div>
      <div class="export-style-config">
        <label class="label-name">表头字体颜色:</label>
        <el-color-picker
          class="style-color-picker"
          v-model="options.headerFontColor"
          size="mini"
          style="margin-right: 10px;"
        ></el-color-picker>
      </div>
      <el-button class="export-config-button" type="primary" @click="exportExcel">
        <i class="el-icon-download"></i>导出
      </el-button>
    </div>
    <div class="export-data">
      <el-table
        :data="tableData"
        border
      >
        <template v-for="item in column">
          <el-table-column :prop="item.name" :label="item.label" :width="item.width"></el-table-column>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
import { publicController} from '@/utils/publicPackage.js'
import { exportStyleExcel} from '@/utils/exportExcel'

export default {
  name: 'index',
  mixins:[ publicController ],
  data(){
    return{
      options:{
        filename: '人员信息',
        format: 'xlsx',
        headerBgColor: '#EBEBEB',
        headerFontColor: '#4E4D4D',
        headerFontSize: 12,
        headerHorizontal: 'left',
      },
      tableData: [],
      column: [
        { name: 'id', label: 'id' },
        { name: 'name', label: '姓名' },
        { name: 'gender', label: '性别', },
        { name: 'age', label: '年龄'},
        { name: 'account', label: '账号' },
        { name: 'city', label: '城市' },
        { name: 'region', label: '城区' },
        { name: 'address', label: '地址',width:250 },
        { name: 'date', label: '日期' ,width:140},
        { name: 'postalCode', label: '邮编' },
      ],
      horizontalOptions: [
        {value: 'left', label: '左对齐'},
        {value: 'center', label: '居中'},
        {value: 'right', label: '右对齐'},
        {value: 'fill', label: '重复填充'},
        {value: 'distributed', label: '两头对齐'},
      ]
    }
  },
  mounted () {
    this.getPartData(10)
  },
  methods:{
    handleChange(val,type){

    },
    exportExcel(){
      const options = {
        column: this.column,
        data: this.tableData,
        filename: this.options.filename || '导出excel',
        format: this.options.format,
        autoWidth: true,
        styleOptions: this.options,
      }
      exportStyleExcel(options)
    },
  }
}
</script>

<style lang="scss" scoped>
.export-config{
  height: 60px;
  width: 100%;
  border-bottom: 2px solid #f4f4f4;
  display: flex;
}
.export-style-config{
  display: flex;
  .label-name{
    font-weight: 600;
    color: #4787d2;
    margin-top: 5px;
  }
  .el-input{
    height: 30px;
    .el-input__inner{
      height: 30px;
      line-height: 30px;
    }
  }
}
.style-color-picker{
  margin-top: 2px;
  margin-left: 10px;
}
.export-data{
  margin-top: 20px;
}
</style>
<style lang="scss">
.export-style-config{
  .el-input__inner{
    height: 30px;
    line-height: 30px;
  }
  .el-input__icon{
    line-height: 30px;
  }
  .input-number-fontsize{
    margin-top: -4px;
    margin-left: 10px;
    margin-right: 30px;
    width: 150px !important;
  }
  .el-input-number__decrease{
    height: 27px;
    line-height: 27px;
    top: 5px;
  }
  .el-input-number__increase{
    height: 27px;
    line-height: 27px;
    top: 5px;
  }
  .style-horizontal{
    width: 150px;
    margin-right: 30px;
  }
}
.export-config-button{
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  background-color: $primaryColor;
  border: 1px solid $primaryColor;
}
</style>
